<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="订单">
    <meta name="description" content="订单">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="js/qrcode.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox ordershowpage buyed" id="app" v-if="loaded==true">
    <div class="msgtip">
        <h3>购买成功</h3>
        <a href="./index.html">返回首页</a>
        <p>订单详情</p>
    </div>
    <!-- <section class="top">
        <div class="wrap">
            <div class="product">
                <div class="img"><img :src="orderdata.product_cover_image" alt=""></div>
                <div class="text">
                    <h3>{{orderdata.product_title}}</h3>
                    <p>套餐：{{orderdata.spec_name}}<i class="el-icon-close"></i>{{orderdata.quantity}}</p>
                </div>
            </div>
        </div>
    </section>
    <section class="person shouhuomsg" v-if="orderdata.customer">
        <div class="wrap">
            <h3 class="tit">订单信息</h3>
            <div class="text">
                <p><span>订单编号：</span><span>{{orderdata.order_no}}</span></p>
                <p><span>购买数量：</span><span>{{orderdata.quantity}}</span></p>
                <p><span>收货人：</span><span>{{orderdata.customer.customer_name}}</span></p>
                <p><span>手机号码：</span><span>{{orderdata.customer.customer_mobile}}</span></p>
                <p><span>详细地址：</span><span>山东省菏泽市成武县凤凰国际东区27号楼 1002室</span></p>
            </div>
        </div>
    </section> -->
    <section class="top">
        <div class="wrap">
            <div class="product">
                <div class="img"><img src="images/order-img.png" alt=""></div>
                <div class="text">
                     <h3>好物优选 | 金龙鱼玉米油油非转基因4升</h3>
                    <p>套餐：金龙鱼4斤装一桶<i class="el-icon-close"></i>2</p>
                </div>
            </div>
        </div>
    </section>
    <section class="person shouhuomsg">
        <div class="wrap">
            <h3 class="tit">订单信息</h3>
            <div class="text">
                <p><span>订单编号：</span><span>bt2021050626541</span></p>
                <p><span>购买数量：</span><span>2</span></p>
                <p><span>收货人：</span><span>刘小波</span></p>
                <p><span>手机号码：</span><span>13910436282</span></p>
                <p><span>详细地址：</span><span>山东省菏泽市成武县凤凰国际东区27号楼 1002室</span></p>
            </div>
        </div>
    </section>
    <section class="person">
        <div class="wrap">
            <h3 class="tit">备注</h3>
            <div class="text">
                <p>预计发货时间xxxxxxxx</p>
            </div>
        </div>
    </section>
</div>
</body>
<script>
  var qrcode = null;
  new Vue({
    el: '#app',
    data() {
      return {
        loaded: false,
        orderid: 0,
        orderdata: null,
        qrcodetxt: '',
      }
    },
    mounted() {
      
      var that = this;
      that.orderid = getUrlParam("id");
      // that.getdata();
      that.loaded=true;
    },
    methods: {
      opencode: function (index) {
        var that = this;
        if (qrcode != null) {
          qrcode.clear();
        }
        that.$nextTick(function () {
          that.makecode(index);
        })
      },
      closecode: function (e) {
        var that = this;
        $('.codepop').fadeOut(500);
      },
      getdata: function () {
        var that = this;
        client_get('orders/' + that.orderid).then(res => {
          that.orderdata = res;
          that.loaded = true;
          if (that.orderdata.tickets.length == 1) {
            that.$nextTick(function () {
              that.makecodeOne();
            })
          }
        })
      },
      makecodeOne: function () {
        var that = this;
        that.qrcodetxt = that.orderdata.tickets[0].ticket_no;
        qrcode = new QRCode($('#qrcodeOne').get(0), {
          text: that.qrcodetxt,
          width: 128,
          height: 128,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      },
      makecode: function (num) {
        var that = this;
        that.qrcodetxt = that.orderdata.tickets[num].ticket_no;
        qrcode = new QRCode($('#qrcode').get(0), {
          text: that.qrcodetxt,
          width: 128,
          height: 128,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
        $('.codepop').fadeIn(500);
      },
    }
  });
</script>
</html>
